<template>
  <div class="header-container">
    <div class="img-tittle-container">
      <div class="img-box">
        <el-image
          :src="require('../../public/ora.png')"
          fit="scale-down"
          class="logo"
          style="width: 100%; height: 100%"
        ></el-image>
      </div>
      <h2>Orangeshop</h2>
    </div>
    <el-menu
      :default-active="$store.state.activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="hendSelect"
      background-color="#545c64"
      text-color="#f6e5df"
      active-text-color="#ffa500"
    >
      <el-menu-item
        index="login"
        class="right-btn"
        v-if="!$store.state.isLogin"
        id="headrer-login"
      >
        <router-link to="/login">登陆/注册</router-link>
      </el-menu-item>
      <el-menu-item
        index="login"
        class="right-btn login-disabled"
        v-else
        id="headrer-login"
      >
        您好,{{ username }}
      </el-menu-item>
      <el-menu-item index="shop" class="right-btn"
        ><router-link to="/">ORANGE商城</router-link></el-menu-item
      >
      <el-submenu index="shoptool" class="right-btn">
        <template slot="title">我的ORANGE</template>
        <el-menu-item index="cart" @click="$router.push('/cart')">购物车</el-menu-item>
        <el-menu-item index="order" @click="$router.push('/order')">我的订单</el-menu-item>
        <el-menu-item index="help" @click="$router.push('/help')">帮助中心</el-menu-item>
      </el-submenu>
      <el-menu-item index="mine" class="right-btn">
        <router-link to="/mine">个人中心</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      username: "", // 用户名
    };
  },
  methods: {
    ...mapMutations(["setLogin", "setActiveIndex"]), // 使用 Vuex 的 mutations
    hendSelect(key) {
      this.setActiveIndex(key);
    },
    // 设置当前激活的菜单项
    setIndex(index) {
      this.setActiveIndex(index);
    },
    // 登录状态
    loginSuccess() {
      this.setLogin(true); // 设置登录状态为 true
    },

    // 统一设置激活项的方法
    updateActiveIndexByRoute() {
      if (this.$route.path.startsWith("/mine")) {
        this.setIndex("mine");
      } else if (this.$route.name !== "index") {
        this.setIndex(this.$route.name);
      } else if (this.$route.name === "login") {
    this.setIndex("login");
  }else {
        this.setIndex("shop");
      }
    },
  },
  mounted() {
    // 读取本地存储中的 userInfo
    const userInfo = localStorage.getItem("userInfo");
    // 如果 userInfo 存在，说明用户已登录
    if (userInfo) {
      this.loginSuccess(); // 调用登录成功方法
      this.username = JSON.parse(userInfo).username;
    }
    // 初始化激活项
    this.updateActiveIndexByRoute();
  },
  watch: {
    // 监听路由变化，动态设置激活项
    $route() {
      this.updateActiveIndexByRoute();
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
/* 头部总容器 */
.header-container {
  width: 100%;
  height: 60px;
  background-color: #545c64;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 左侧标题容器 */
.img-tittle-container {
  display: flex;
  align-items: center;
  background-color: #fbe5cb;
  width: 240px;
  height: 100%;
  border-radius: 0 0 60px 0;
}
/* logo盒子 */
.img-box {
  margin: 0px;
  width: 60px;
  height: 100%;
}
h2 {
  color: #ffa500;
}
/* 右侧按钮容器 */
.el-menu-demo {
  width: 45%;
  height: 60px;
  display: flex;
  justify-content: space-between;
}
/* 右侧按钮 */
.right-btn {
  flex: 1;
  height: 60px;
  color: #f6e5df;
  font-size: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: #f6e5df;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

.login-disabled {
  cursor: default !important;
  color: #ffa854 !important;
  background: transparent !important;
  pointer-events: none;
  font-size: 17px;
}
</style>
